<!-- 公共文件 start -->
@extends('admin.public.base')
<!-- 公共文件 end -->
<style>
    .number-container {
        display: flex;
        justify-content: space-around;
        letter-spacing: 1px;
    }
    .number-card {
        width: 19%;
        height: 110px;
        background-color: red;
        border-radius: 4px;
    }
    .number-card:nth-child(1) {
        background-image: linear-gradient(to bottom right, #5570FD, #B08BFE);
    }
    .number-card:nth-child(2) {
        background-image: linear-gradient(to bottom right, #FF9E48, #FDCE6F);
    }
    .number-card:nth-child(3) {
        background-image: linear-gradient(to bottom right, #E74B4C, #F8AAA9);
    }
    .number-card:nth-child(4) {
        background-image: linear-gradient(to bottom right, #1AB4A9, #6FDEBF);
    }
    .number-card:nth-child(5) {
        background-image: linear-gradient(to bottom right, #1C1E39, #7F81BB);
    }
    .number-card:nth-child(6) {
        background-image: linear-gradient(to bottom right, #5095EE, #65CAE8);
    }
    .number-name {
        margin: 15px 25px;
        font-size: 20px;
        color: #ffffff;
    }
    .number-detail {
        margin: 25px 15px 10px 25px;
        font-size: 16px;
        color: #ffffff
    }
</style>
@section('content')
    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="number-container">
                <div class="number-card">
                    <div class="number-name">货款余额</div>
                    <div class="number-detail">{{$data['hk_balance']}}元</div>
                </div>
                <div class="number-card">
                    <div class="number-name">管理费余额</div>
                    <div class="number-detail">{{$data['glf_balance']}}元</div>
                </div>

                <div class="number-card">
                    <div class="number-name">今日出库商品量</div>
                    <div class="number-detail">{{$data['today_outbound']}}件</div>
                </div>
                <div class="number-card">
                    <div class="number-name">商品库存总量</div>
                    <div class="number-detail">{{$data['goods_inventory']}}件</div>
                </div>
                <div class="number-card">
                    <div class="number-name">代理商总数</div>
                    <div class="number-detail">{{$data['store_count']}}个</div>
                </div>
            </div>
            <div class="layui-col-sm12 layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">商品出库订单统计</div>
                    <div class="layui-card-body" style="min-height: 280px;">
                        <div id="main1" class="layui-col-sm12" style="height: 300px;"></div>
                    </div>
                </div>
            </div>
            <div class="layui-col-sm12 layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">商品分类</div>
                    <div class="layui-card-body" style="min-height: 280px;">
                        <div id="main2" class="layui-col-sm12" style="height: 300px;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
    <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
    <script type="text/javascript">
        /*// 基于准备好的dom，初始化echarts实例
        var myChart1 = echarts.init(document.getElementById('main1'));
        // 指定图表的配置项和数据
        var option1 = {
            grid: {
                top: '5%',
                right: '1%',
                left: '1%',
                bottom: '10%',
                containLabel: true
            },
            tooltip: {
                trigger: 'axis'
            },
            xAxis: {
                type: 'category',
                data: ['2020/01/07','2020/01/08','2020/01/09','2020/01/10','2020/01/11','2020/01/12','2020/01/13']
            },
            yAxis: {
                type: 'value'
            },
            series: [
            {
                name:'订单量',
                data: [82, 92, 91, 94, 190, 130, 120],
                type: 'line',
                smooth: true
            },
            {
                name:'出库量',
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: 'line',
                smooth: true
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart1.setOption(option1);*/


        $(document).ready(function(){
            $.ajax({
                type: 'POST',
                url: '/admin/index/numberStatistic',
                data: {},
                dataType: 'json',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                },
                success: function (data) {
                    // 基于准备好的dom，初始化echarts实例
                    var myChart1 = echarts.init(document.getElementById('main1'));
                    // 指定图表的配置项和数据
                    var option1 = {
                        grid: {
                            top: '5%',
                            right: '1%',
                            left: '1%',
                            bottom: '10%',
                            containLabel: true
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        xAxis: {
                            type: 'category',
                            data: data.data.date
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                name:'订单量',
                                data: data.data.order_count,
                                type: 'line',
                                smooth: true
                            },
                            {
                                name:'出库量',
                                data: data.data.outbound_count,
                                type: 'line',
                                smooth: true
                            }]
                    };
                    // 使用刚指定的配置项和数据显示图表。
                    myChart1.setOption(option1);


                    // 基于准备好的dom，初始化echarts实例
                    var myChart2 = echarts.init(document.getElementById('main2'));
                    // 指定图表的配置项和数据
                    var option2 = {
                        tooltip : {
                            trigger: 'item',
                            formatter: "{a} <br/>{b} : {c} ({d}%)"
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left',
                            data: data.data.name
                        },
                        series : [
                            {
                                name: '访问来源',
                                type: 'pie',
                                radius : '55%',
                                center: ['50%', '60%'],
                                data: data.data.data,
                                itemStyle: {
                                    emphasis: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    };
                    // 使用刚指定的配置项和数据显示图表。
                    myChart2.setOption(option2);


                },
                error: function (xhr, type) {}
            });
        });
    </script>
@endsection
